Hon
g
ji
Pr
ojec
t
홈페이지의
목적
•
포토폴리오
사이트로
고객의 요구사항을 최대한 반영하고
이
사이트의
기본기능인
웹사이트 방문자에게
작품을
보여주고
사용자에게 쉬운 사용법을
제공
.
사용한
api
및
언어
•
html5
•
J
av
ascript
•
J
q
ue
r
y
•
Bootstrapk
•
ph
p
프로젝트 참조
프로젝트
링크
:
ht
tps://
github.c
om/hongjinho/hongji_project
서비스
중인
링크
:
h
t
tp://hongjih
yun.com/
동영상
링크
:
h
t
tps://youtu.be/Iauy
sCw3vFQ
고객의
요구사항
고객의
요구사항
기능
1)
페이지
기능을 스크롤로
구현
2)
페이지
로딩을
최소화
디자인
1)
화면
크기에 따른
홈페이지의
디자인들이 비슷해야함
.
기능
구현
메인 페이지 구현
메인
페이지
일정 간격만큼
스크롤시
다음페이지를
불러오는 기능
•
게시물
클릭하여
게시물을
보는
페이지로
이동하는 기능
•
게시물의
db
구조는
게시물
id,
본문
,
제목
,
이미지들의
링
크
(
또는
비디오의
링크
)
들로
구성되여
php
에서
로딩하는
작
업을
수행하고
있습니다
.
페이지로딩을
최소화
관련
소스
링크
ht
t
ps
:/
/g
it
h
ub
.c
om
/h
o n
g
j
in
ho
/h
on
g
j
i_
pro
j
ec t
/
bl
ob
/m
as
ter
/
so
urc
e/
js
/pa
gi
n
g_
de
fa
u
lt
_
op
.j
s
Wi
n
do
w
.
on
ha
s
hc
ha
ng
e
$
(w
in
do
w)
.re
ad
y
이벤트와
n
ow
_pa
gi
ng
()
함수
참조
구현
방법
아까 페이징은
스크롤
이벤트를
들어서
ajax
로
구현하였고
카테고리
구현은
해시 데이터
(
경로
#id)
를
써서 뒤로
가기
,
새로 고침
,
홈페이지 최초
방문
시 카테고리를 인식하여
ajax
로
데이터를
불러와서
결과물을
출력한다
해시 데이터를 페이지
태그처럼
사용하였습니다
.
디자인
구현
화면 크기에 따른 홈페이지의
디자인
구현
방법
Css
의
미디어
쿼리로
화면
크기
기준을
4
개로
나누어서 각각 기준에
따
른
디자인을 보여줌
관련
소스
링크
ht
t
ps
:/
/g
it
h
ub
.c
om
/h
o n
g
j
in
ho
/h
on
g
j
i_
p
ro
je
ct
/b
lo
b
/m
as
ter
/ s
ou
rc
e/
cs
s/
st
yl
e_
t
hi
s.
cs
s
1)
Pc
의
디자인은
css
미디
어
쿼리와
calc
()
함수로
디자인을 구현
2)
모바일 페이지는
부트스
트랩으로 구현
디자인
관리자 모드
관리자 모드 구현
기능
설명
.
로그인하면
관리자
ui
가
나옵니다
.
업로드
및
게시물
수정을
할수있습니다
.
업로드와
게시물 수정은
게시물의
고유
id
를
이용하여
업로 드
및 수정
작업이 진행
됩니다
.
관리자 모드 사진
관리자 모드 게시물 수정 및 업로드 창
사진